let stop = false
let next = 0
const interval = 1
const drawCircle = drawOneCircle()
const randomRGB = () => random(0, 255)

const randomColor = () => color(randomRGB(), randomRGB(), randomRGB())
let concentricCircle = []
const concentricNumber = 5
let circles = []
const circlesNumber = 15
function setup() {
    const shortLine = min(windowWidth, windowHeight)
    select('.reload').mousePressed(() => draw())
    select('.save').mousePressed(() => saveCanvas('波纹'))
    const cnv = createCanvas(windowWidth, windowHeight);
    background(255);
    translate(windowWidth / 2, windowHeight / 2)
    circle(0, 0, 200)
    concentricCircleColor = randomColor()
    randomCircleColor = randomColor()
    for (let i = 0; i < concentricNumber; i++) {
        concentricCircle.push(new organicCircle({ x: 0, y: 0, r: (i + shortLine / 800) * shortLine / 2 / concentricNumber * 0.9, color: concentricCircleColor }))
    }

    for (let i = 0; i < circlesNumber; i++) {
        circles.push(new organicCircle({ x: random(-windowHeight / 2, windowHeight / 2), y: random(-windowHeight / 2, windowHeight / 2), r: random(shortLine / 6, shortLine / 2), color: randomCircleColor }))
    }
}


function draw() {
    translate(windowWidth / 2, windowHeight / 2)
    // drawCircle()
    concentricCircle.forEach(c => c.drawOrganicCircle(shortLine / 400, 20))//TODO:根据设备的宽高不同而变化，响应式布局
    circles.forEach(c => c.drawOrganicCircle(3, 10))
}


// function organicCircle(x, y, r, color = 'black') {
//     let degree = 0
//     const step = 0.05
//     noFill();
//     stroke(color);
//     while (degree < 2 * PI) {

//         let x1 = x + r * cos(degree)
//         let y1 = y + r * sin(degree)
//         strokeWeight(random(10, 20));
//         point(x1, y1)
//         degree += step
//     }

//     stop = true
// }

class organicCircle {
    stop = false;
    x;
    y;
    r;
    color;
    degree = 0;
    constructor({ x = 0, y = 0, r = 30, color = 'black' } = {}) {
        this.x = x;
        this.y = y;
        this.r = r;
        this.color = color;
    }

    drawOrganicCircle(width = 10, roughness = 5) {
        const step = 2 / this.r
        noFill();
        stroke(this.color);
        if (millis() > next & this.stop == false) {
            if (this.degree < 2 * PI) {

                let x1 = this.x + this.r * cos(this.degree)
                let y1 = this.y + this.r * sin(this.degree)
                strokeWeight(random(width, width + roughness));
                point(x1, y1)
                this.degree += step
                next += interval
            } else {
                this.stop = true
                this.degree = 0
            }
        }

    }

}

function drawOneCircle(x = 0, y = 0, r = 100, strokeweight = 10, roughness = 10, color = 'pink', density = 30) {
    const step = 200 / (r * density)
    let next = 0
    let stop = false
    let interval = 100
    let degree = 0

    return function () {
        noFill()
        stroke(color)

        if (millis() > next & stop == false) {
            if (degree > 2 * PI) {
                stop = true
                degree = 0
            } else {
                let x1 = x + r * cos(degree)
                let y1 = y + r * sin(degree)
                strokeWeight(random(strokeweight, strokeweight + roughness));
                point(x1, y1)
                degree += step
                next += interval
            }
        }
    }
}